<!-- 表单 -->
<template>
  <div>
    <Form label-width="20%"
          label-mark="："
          :model="the.form.data"
          :rules="the.form.rules"
          @onEvent="onFormEvent">

      <Field label="文本"
             prop="text">
        <Input v-model="the.form.data.text" />
      </Field>
      <Field label="组织ID"
             prop="gid">
        <Input v-model="the.form.data.gid"
               placeholder="请输入组织ID"
               type="number"
               icon="icon-sousuo" />
      </Field>
      <Field>
        <Button type="primary"
                @click="btnEvent('save')">
          提交
        </Button>
      </Field>
    </Form>

    <Form label-position="top"
          :model="the.form.data"
          :rules="the.form.rules"
          @onEvent="onFormEvent"
          class="form-test-page">

      <Field prop="text">
        <template #label><b>Text</b></template>
        <Input v-model="the.form.data.text" />
      </Field>
      <Field label="组织ID"
             prop="gid">
        <Input v-model="the.form.data.gid"
               placeholder="请输入组织ID"
               type="number"
               icon="icon-sousuo" />
      </Field>
      <Field>
        <Button type="primary"
                @click="btnEvent('save')">
          提交
        </Button>
      </Field>
    </Form>
  </div>
</template>

<script>
import { reactive } from '@/components/vue.api';
export default {
  components: {},
  props: {},
  setup () {
    const { message } = window.$plus
    const the = reactive({
      form: {
        isPass: false,
        data: {
          text: '',
          gid: null,
        },
        rules: {
          text: [
            {
              required: true,
              //  验证空格输入
              whitespace: true,
              message: '请输入'
            },
            {
              type: 'string',
              min: 6,
              message: '长度必须大于6位',
            },
            { tip: '测试规则提示' }
          ],
          gid: [
            { tip: '组织id' },
            { type: 'number', message: '请输入数字 ' }
          ]
        }
      }
    })

    const onFormEvent = (resp) => {
      console.log('onFormEvent', resp)

      switch (resp.cmd) {
        case 'validator':
          // 数据验证
          the.form.isPass = resp.isPass;
          break;
        // case 'enter':
        //   //回车
        //   sendLogin()
        //   break;
      }
    }

    const btnEvent = (cmd) => {
      let msg = cmd;
      if (!the.form.isPass) {
        msg += '验证未通过'

      } else {
        msg += '验证通过'
        console.log('form', JSON.stringify(the.form.data))
      }
      message.warning(msg)
    }

    return {
      the,
      onFormEvent, btnEvent
    };
  }
}

</script>
<style lang='less'>
.form-test-page {
  margin: auto 10%;
}
</style>